<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // 表单需要了解两个地方：
    //  1- 如何收集表单数据
    //  2- 如何设置表单初始值
    // 受控组件：需要为其增加onChnage事件，该事件负责更新数据状态（因为组件的值受到数据状态的影响 ）
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    class App extends React.Component {
        state = {
            userName: "zhangsan",
            passWord: 12345,
            city:3,
            sex:"1",
            hobby:["1","2","3"]
        }

        changeHandler(e) {
            let value = e.target.value;
            // 优化
            if(e.target.type === "checkbox"){
                // 复制状态给予常量copyState
                value = [...this.state[e.target.name]];
                // 根据选中的value为条件去数组中查找满足条件的下标
                const index = value.findIndex(v=>v===e.target.value);
                // 如果找到了
                if(index>-1) value.splice(index,1);
                else value.push(e.target.value);
            }
            this.setState({
                [e.target.name]: value,
            })


            // // 判断是否为多选
            // if(e.target.type === "checkbox"){
            //     // 复制状态给予常量copyState
            //     const copyState = [...this.state[e.target.name]];
            //     // 根据选中的value为条件去数组中查找满足条件的下标
            //     const index = copyState.findIndex(v=>v===e.target.value);
            //     // 如果找到了
            //     if(index>-1) copyState.splice(index,1);
            //     else copyState.push(e.target.value);
            //
            //     this.setState({
            //         [e.target.name]:copyState
            //     })
            // }else{
            //     this.setState({
            //         [e.target.name]: e.target.value,
            //     })
            // }


        }

        submitHandler(e) {
            e.preventDefault();
            console.log("userName", this.state.userName);
            console.log("passWord", this.state.passWord);
            console.log("city", this.state.city/1);
            console.log("sex", this.state.sex/1);
            console.log("hobby", this.state.hobby);
        }

        render() {
            return (
                <form onSubmit={this.submitHandler.bind(this)}>
                    <p>用户名：<input name={"userName"} onChange={this.changeHandler.bind(this)} value={this.state.userName}
                                  type="text"/></p>
                    <p>密码：<input name={"passWord"} onChange={this.changeHandler.bind(this)} value={this.state.passWord}
                                 type="password"/></p>
                    <p>
                        所在城市：
                        <select name="city" onChange={this.changeHandler.bind(this)} value={this.state.city}>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                            <option value="3">武汉</option>
                            <option value="4">西安</option>
                            <option value="5">深圳</option>
                            <option value="6">南白滩</option>
                        </select>


                    </p>
                    <p>
                        性别：
                        <input type="radio" onChange={this.changeHandler.bind(this)} checked={this.state.sex === "1"} name={"sex"} value={1}/>男
                        <input type="radio" onChange={this.changeHandler.bind(this)} checked={this.state.sex === "2"} name={"sex"} value={2}/>女
                    </p>
                    <p>
                        爱好：
                        <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes("1")} value={1}/>学习
                        <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes("2")} value={2}/>电影
                        <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes("3")} value={3}/>游戏
                        <input type="checkbox" name={"hobby"} onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes("4")} value={4}/>视频
                    </p>
                    <button>提交</button>
                </form>
            )
        }
    }

    root.render(<App/>)
</script>
</html>